<template>
  <div class="container">
    <div class="row">
      <div class="card">
        <div class="card-body">
          <div class="list">
            <div class="row">
              <div class="col">商品信息</div>
              <div class="col">单价（元）</div>
              <div class="col">数量</div>
              <div class="col">金额</div>
            </div>
            <div class="row" v-for="item in props.list" :key="item.key">
              <div class="col">{{ `${item.name}-${item.info}` }}</div>
              <div class="col">{{ item.cost }}</div>
              <div class="col">{{ item.buysl }}</div>
              <div class="col">{{ item.buysl * item.cost }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps(['list'])

// 定义prop ， prop 传入渲染
// 子组件 通信 父组件
//
// const productList = ref([]);
</script>

<style lang="scss" scoped></style>
